import { useCallback, useEffect } from 'react'

export function useIgnoreMouseEvents () {
  const handleMouseEnter = useCallback(() => {
    window.api.setIgnoreMouseEvents(false)
  }, [])

  useEffect(() => {
    const root = document.querySelector('#root') as HTMLDivElement
    if (!root) return

    const handler = (e: MouseEvent) => {
      if (e.target === e.currentTarget) {
        window.api.setIgnoreMouseEvents(true, { forward: true })
      }
    }
    root.addEventListener('mouseover', handler)

    return () => {
      if (!root) return

      root.removeEventListener('mouseover', handler)
    }
  }, [])

  return [handleMouseEnter]
}
